import { getUserCache } from "@/utils/storage";
import style from "./TimeLine.module.scss";
export default function TimeLine() {
  const treeHoleList = [
    {
      id: "1575",
      userId: "1",
      likeCount: 0,
      content:
        "平衡快乐与悲伤\n\n佛曰：一个人只有一个心脏，却有两个心房。一个住着快乐，一个住着悲伤，不要笑得太大声，不然会吵醒旁边的悲伤。\n\n我说：不要太过悲伤，不然会忘记快乐的模样。",
      isPublic: true,
      type: "friend",
      source: null,
      createTime: "2023-09-05 15:58:49",
    },
    {
      id: "1561",
      userId: "1",
      likeCount: 0,
      content: "争名夺利几时休？早起迟眠不自由。",
      isPublic: true,
      type: "friend",
      source: null,
      createTime: "2023-09-02 20:43:40",
    },
    {
      id: "668",
      userId: "1",
      likeCount: 0,
      content: "查看端口占用：\n\nnetstat -tunlp | grep 80\nps -ef | grep java",
      isPublic: true,
      type: "friend",
      source: null,
      createTime: "2023-02-23 13:58:44",
    },
    {
      id: "99",
      userId: "1",
      likeCount: 0,
      content:
        "你看对面的青山多漂亮[微笑]\n<Sara,https://file.poetize.cn/commentPicture/Sara11668261084260789>",
      isPublic: true,
      type: "friend",
      source: null,
      createTime: "2022-11-12 21:51:29",
    },
    {
      id: "73",
      userId: "1",
      likeCount: 0,
      content:
        "MySQL死锁解决办法\n\n1. 查看事务信息：SELECT * FROM INFORMATION_SCHEMA.INNODB_TRX\n2. 定位到死锁线程：trx_mysql_thread_id\n3. 删除死锁：kill trx_mysql_thread_id",
      isPublic: true,
      type: "friend",
      source: null,
      createTime: "2022-11-04 10:24:39",
    },
    {
      id: "72",
      userId: "1",
      likeCount: 0,
      content: "回退本地提交到暂存区：git reset --soft HEAD~1",
      isPublic: true,
      type: "friend",
      source: null,
      createTime: "2022-11-04 10:22:57",
    },
    {
      id: "62",
      userId: "1",
      likeCount: 0,
      content: "2022年8月21日\n\n博客终于完结了。",
      isPublic: true,
      type: "friend",
      source: null,
      createTime: "2022-08-21 12:13:11",
    },
    {
      id: "9",
      userId: "1",
      likeCount: 0,
      content:
        "今天看B站一个视频，真是豁然开朗。\n\n我们懂得很多道理，但还是过不好这一生。\n\n自认为自己懂得很多道理，然而并没有什么改变。原来无关道理对错，真正重要的是经历。\n\n有了经历，道理才有了意义。",
      isPublic: true,
      type: "friend",
      source: null,
      createTime: "2022-06-20 15:31:34",
    },
    {
      id: "1",
      userId: "1",
      likeCount: 0,
      content: "网站上线啦[呲牙][呲牙][呲牙]",
      isPublic: true,
      type: "friend",
      source: null,
      createTime: "2021-11-24 13:23:45",
    },
  ];
  const user = getUserCache();
  const avatar = user.avatar;
  const tree_hole_color = [
    "rgb(180, 224, 255)",
    "rgb(180, 203, 255)",
    "rgb(246, 223, 255)",
    "rgb(255, 214, 198)",
    "rgb(131, 123, 199)",
    "#23d5ab",
  ];
  return (
    <div className={style["tree-hole-container"]}>
         <ol className={style['tree-hole-list']}>
            {
                treeHoleList.map((treeHole,index)=>

                <li className={style['tree-hole-li']}  key={index}>
                <div
                  className={`${style['tree-hole-content']} ${index % 2 === 0?style.leftTreeHole:style.rightTreeHole}`}
                 
                >
                  <img  className={style['avatar-img']} width="36" height="36" src={avatar} />
                  <div
                    className={style['tree-hole-box']}
                    style={{
                      background: tree_hole_color[index % tree_hole_color.length]
                    }}
                  >
                    {
                     index % 2 === 0&&  <div
                       className={style['box-tag']}
                      
                       style={{
                         borderColor:
                           'transparent transparent transparent' +
                           tree_hole_color[index % tree_hole_color.length]
                       }}
                     ></div>
                    }
                   {
                       index % 2 !== 0&& <div
                        className={style['box-tag']}
                       
                        style={{
                          'borderColor':
                            'transparent ' +
                            tree_hole_color[index % tree_hole_color.length] +
                            ' transparent transparent'
                        }}
                      ></div>
                   }
                 
                    <div className={style['my-content']} dangerouslySetInnerHTML={{__html:treeHole.content}} ></div>
                    <div style={{display: 'flex', justifyContent: 'space-between'}}>
                      <div>😃 { treeHole.createTime }</div>
                    </div>
                  </div>
                </div>
              </li>
                )
            }
         </ol>
      <div className={style["tree-hole-go"]}>
        <i className={`fa ${style["fa-paper-plane"]}`}></i>
      </div>
    </div>
  );
}
